<template>
  <el-container>
    <el-header><h1 style="float: left; color: #FFFFFF">柳州天步科技创业园管理系统</h1></el-header>
    <div class="login-box">
      <h4>用户名密码登录</h4>
      <el-input v-model="username" placeholder="用户名"></el-input>
      <el-input placeholder="密码" v-model="password" show-password></el-input>
      <el-button @click="Login" type="primary">登录</el-button>
      <router-link to="/UserReg">点此注册</router-link>
    </div>
  </el-container>
</template>
<script>
import {UserLogin} from "../../network/userApi";

export default {
  name: "UserLogin",
  data() {
    return {
      username: "",
      password: "",

    }
  },
  methods: {
    Login() {
      UserLogin(this.username, this.password).then(res => {
        switch (res.code) {
          case 2000 :
            if (this.$route.query.message === "screen") {
              this.$router.push({path: '/screen'})
            } else {
              this.$router.push({path: '/home'})
            }
            break;
          default:
            this.$message({
              message: "账号或密码错误",
              type: 'error'
            })
        }
      })
    }
  },
  mounted() {
    document.querySelector('body').setAttribute('style',
        "background-image: url(" + require("../../assets/img/login.jpg") + ");background-size: cover;" +
        "background-repeat: no-repeat");
  },
  beforeDestroy() {
    document.querySelector('body').removeAttribute('style')
  },

}

</script>

<style scoped>
.login-box {
  height: 300px;
  width: 400px;
  background: #ffffff;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  border-radius: 5px;
  border: #bebebe 1px solid;
}
.el-button, .el-input {
  position: relative;
  left: 7.5%;
  width: 340px;
  display: block;
  margin-top: 20px;
}
.el-button {
  position: relative;
  top: 5%;
}
h4 {
  text-align: center;
}
a {
  text-decoration: none;
  position: relative;
  top: 7%;
  left: 7.5%;
  font-size: 12px;
  color: #409EFF;
}

</style>